<template>
	<div id="card_box" class="container row" >
			<div id="card1" class="card col-lg-4 col-md-6 col-sm-12">
				<a href="/#/schoolQuery" target="_blank">
					<div class="kapian">
						<div class="tu">
							<img src="../../assets/北京大学31.jpg">
						</div>
						<div class="wenben">
							<h2>查学校</h2>
							<p style="padding-bottom: 20px;">名气高校</p>
							<p>
								各类学校，985、211、双一流，本科专科都能查到
								选择你心仪的学校吧！
							</p>
						</div>
					</div>
				</a>
				
			</div>
			
			<div id="card2" class="card  col-lg-4 col-md-6 col-sm-12">
				<a href="/#/major" target="_blank">
					<div class="kapian">
						<div class="tu">
							<img src="../../assets/02.jpg">
						</div>
						<div class="wenben">
							<h2>查专业</h2>
							<p style="padding-bottom: 20px;">热门专业</p>
							<p>
								计算机科学与工程、金融学、心理学、各种专业随你挑选、这里有各类专业的详细信息
								在知识的海洋里，您一定能选到心中最向往的职业！
							</p>
						</div>
					</div>
				</a>
				
			</div>
			<div id="card3" class="card  col-lg-4 col-md-6 col-sm-12">
				<a href="/#/schoolInfo?id=31" target="_blank">
					<div class="kapian">
						<div class="tu">
							<img src="../../assets/map.png">
						</div>
						<div class="wenben">
							<h2>查周边</h2>
							<p style="padding-bottom: 20px;">高校地图</p>
							<p>
								点击学校信息界面，您可以看到该高校校区的实况地图，并对其周边进行查看。
							</p>
						</div>
					</div>
				</a>
			</div>
		</div>
	
	
</template>

<script>
	
	export default {
	    name: 'dynamicCard',
	    data() {
	        
	    },
		components:{
			
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: radial-gradient(rgb(241, 238, 238), black);
	}
	
	.card{
		background-color: #E6F1FE;
		background-image: url(../../assets/backimg5.png);
		border-radius: 15px;
		background-size:cover;
		background-attachment: fixed;
		margin-top: 15px;
	}
	
	
	.kapian {
		position: relative;
		width: 300px;
		height: 400px;
		border-radius: 3px;
		background-color: #fff;
		box-shadow: 2px 3px 3px rgb(139, 138, 138);
		overflow: hidden;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	.kapian:hover {
		box-shadow: 2px 3px 10px rgb(36, 35, 35);
	}
	
	.tu {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300px;
		overflow: hidden;
	
	}
	
	.tu img {
		width: 100%;
		height: 100%;
		transition: all 0.5s;
	}
	
	.kapian:hover .tu img {
		transform: scale(1.2);
		filter: blur(1px);
	}
	
	.wenben {
		position: absolute;
		bottom: -200px;
		width: 100%;
		height: 300px;
	
		background-color: rgb(247, 242, 242);
		transition: 0.5s;
	}
	
	.kapian:hover .wenben {
		bottom: 0px;
	}
	
	.wenben h2 {
		color: rgb(21, 74, 172);
		line-height: 60px;
		text-align: center;
	
	}
	
	.wenben p {
		padding: 0 30px;
		font-family: 'fangsong';
		font-size: 16px;
		font-weight: bold;
		line-height: 20px;
		text-align: center;
	}
</style>
